<template>
  <div class="out">
    <van-nav-bar title="购物车列表" left-arrow @click-left="onClickLeft" />

    <van-checkbox-group v-model="checkedlist">
      <div class="cart" v-for="(item, index) in list" :key="index">
        <van-checkbox :name="item.id"></van-checkbox>
        <van-swipe-cell>
          <van-stepper
            id="stepper"
            v-model="item.nums"
            @change="onEditNum(item)"
          />
          <van-card
            :price="item.total"
            :title="item.product.name"
            class="goods-card"
            :thumb="item.product.thumbs_text"
            @click-thumb="ProductDetail(item)"
          >
            <template #tags>
              <div id="dj">单价: ￥{{ item.price }}</div>
            </template>
            <template #desc v-if="item.attrs">
              <van-tag
                size="medium"
                type="warning"
                v-for="child in item.attrs"
                style="margin-right: 10px"
                >{{ child.value }}</van-tag
              >
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              id="delete-button"
              @click="onDelete(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </van-checkbox-group>

    <!-- 底部 -->
    <van-submit-bar
      :price="total"
      button-text="提交订单"
      @submit="onSubmit"
      id="submit"
    >
      <van-checkbox v-model="checkedAll" @click="ChangeAllEvent"
        >全选</van-checkbox
      >
    </van-submit-bar>
  </div>
  <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
import { computed } from 'vue';
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser") ?? {})

const onClickLeft = () => history.back();
const checkedAll = ref(false);
const checkedlist = ref([])
const list = ref([]);


// 加载购物车数据
onBeforeMount(() => {
  getCartData()
})
const getCartData = async () => {
  let result = await Api.GwcIndex({ busid: LoginUser.id })
  if (result.code == 1) {
    result.data.forEach(item => {
      if (item.attrs) {
        item.attrs = JSON.parse(item.attrs)
      }
    });
    list.value = result.data;
  }
}

// 计算总金额
const total = computed(() => {
  let nums = 0
  list.value.forEach(item => {
    // 如果选中的id在item里面，加上金额
    if (checkedlist.value.includes(item.id)) {
      nums += parseFloat(item.total);
    }
    if (checkedlist.value.length >= list.value.length) {
      checkedAll.value = true;
    } else {
      checkedAll.value = false;
    }
  })
  return nums * 100;
})

// 全选
const ChangeAllEvent = () => {
  if (checkedAll.value) {
    checkedlist.value = list.value.map((item) => item.id)
  } else {
    checkedlist.value = []
  }
}

// 删除
const onDelete = async (id) => {
  showConfirmDialog({
    title: '删除',
    message:
      '确认是否删除该商品?',
  })
    .then(async () => {
      let result = await Api.GwcDelete({ ids: id, busid: LoginUser.id })
      if (result.code == 1) {
        showSuccessToast(result.msg);
        getCartData()
      } else {
        showFailToast(result.msg);
      }
    })
    .catch(() => { });

};

// 编辑商品
const onEditNum = async (item) => {
  let data = {
    id: item.id,
    nums: item.nums,
    busid: LoginUser.id
  }
  let result = await Api.GwcEditNum(data)
  if (result.code == 1) {
    getCartData();
  } else {
    showFailToast(result.msg);
  }
};

// 跳转商品详情
const ProductDetail = async (item) => {
  proxy.$router.push({
    path: '/product/detail',
    query: {
      pid: item.proid
    }
  })
}


const onSubmit = () => {
  if (checkedlist.value.length <= 0) {
    showFailToast('请选择购物车产品');
    return false;
  }
  proxy.$router.push({
    path: '/product/confirm',
    query: {
      cartids: checkedlist.value.toString(),
      type:'cart'
    }
  })
};
</script>

<style>
@import url("/assets/css/gwc.css");
.cart {
  display: flex;
  align-items: center;
  width: 100%;
}

.cart .van-swipe-cell {
  width: 100%;
}

.cart .van-swipe-cell__right .van-button {
  height: 100%;
}
#dj {
  color: #848484;
}
</style>